/**
 * 数采地图 - 集团
 */
 import React from 'react';
 import styles from './index.less';
 import { Breadcrumb } from 'antd';
 import { connect } from 'umi';
 import { Context } from './context';
 import event from './event';
 
 import MapComp from './components/MapComp';
 import Automation from './components/Automation';
 import DataSituation from './components/DataSituation';
 import DataQuality from './components/DataQuality';
 
 @connect(({ powerPlant }) => ({
   powerPlant,
 }))
 export default class extends React.Component {
   state = {
     title: this.props.route.name,
   };
   componentDidMount = () => {};
   getItem = (params = {}) => {
     var style = {
       background: params.bgColor,
     };
     if (params.end) style.margin = 0;
     return (
       <div className={styles.item} style={style}>
         <div className={styles.title}>{params.title}</div>
         <div className={styles.describe}>{params.describe}</div>
         <div className={styles.img}>
           <img src={params.icon} />
         </div>
       </div>
     );
   };
   render() {
     const { header } = this.props.powerPlant;
     var store = {};
     return (
       <Context.Provider value={store}>
         <div className={styles.pageRoot}>
           <div className={styles.header}>
             <Breadcrumb>
               <Breadcrumb.Item>数据资产</Breadcrumb.Item>
               <Breadcrumb.Item>电厂数采地图</Breadcrumb.Item>
             </Breadcrumb>
             <div className={styles.title}>{this.state.title} - 数采地图</div>
           </div>
 
           <div className={styles.icons}>
             {this.getItem({
               title: '累计数采量',
               describe: header.aaaa1,
               bgColor: 'linear-gradient(135deg, #5EC5EE 0%, #4EB0D7 100%)',
               icon: require('./img/icon1.png'),
             })}
 
             {this.getItem({
               title: '今日数采量',
               describe: header.aaaa2,
               bgColor: 'linear-gradient(135deg, #4186FD 0%, #3671D7 100%)',
               icon: require('./img/icon2.png'),
             })}
 
             {this.getItem({
               title: '数采自动化率',
               describe: header.aaaa3,
               bgColor: 'linear-gradient(135deg, #61D5B4 0%, #4DAF93 100%)',
               icon: require('./img/icon3.png'),
             })}
 
             {this.getItem({
               title: '数据上达率',
               describe: header.aaaa4,
               bgColor: 'linear-gradient(135deg, #2399E8 0%, #405AD5 100%)',
               icon: require('./img/icon4.png'),
             })}
 
             {this.getItem({
               title: '数据质量异常率',
               describe: header.aaaa5,
               bgColor: 'linear-gradient(135deg, #5CC2EB 0%, #32A4D1 100%)',
               icon: require('./img/icon5.png'),
               end: true,
             })}
           </div>
 
           <div className={styles.map}>
             <MapComp />
           </div>
 
           <div>
             <Automation />
             <DataSituation />
             <DataQuality />
           </div>
         </div>
       </Context.Provider>
     );
   }
 }
 